<template>
  <div class="v-contain-element-right-area">
    <div class="clear-wrap">
      <span>可容纳元素</span>
      <div
        class="g-clear-button g-pointer"
        @click="clearAllElement"
      >
        <img
          src="statics/icons/app/icon_clear.svg"
          class="g-clear-icon"
        />
      </div>
    </div>
    <div class="element-list">
      <div
        v-for="(ele, index) in containElementModel.elementRange"
        :key="index"
        class="element-item"
        :style="{ cursor: containElementModel.isModelDisabled ? 'not-allowed' : 'pointer' }"
        :class="{ active: currentIndex === index }"
        :draggable="containElementModel.isModelDisabled ? false : true"
        @dragstart="dragstart(ele, index)"
        @dragenter="dragenter(ele, $event)"
        @dragend="dragend"
        @dragover="dragover($event)"
        @click="handleClickItem(index)"
      >
        <img
          class="element-item-img"
          :src="ele.icon"
        />
        <div class="element-item-label">{{ ele.name }}</div>
        <CircleCloseFilled
          v-if="currentIndex === index"
          class="delete-icon"
          @click.stop="removeComp(index, ele)"
        ></CircleCloseFilled>
        <!--   <el-tooltip  v-if="showTips" :content="ele.name" placement="bottom" effect="light">
          <div class="element-item-box">
            <img class="element-item-img" :src="ele.icon" />
            <div class="element-item-label"> {{ ele.name }}</div>
          </div>
        </el-tooltip>
        <div v-if="!showTips" class="element-item-box">
          <img class="element-item-img" :src="ele.icon" />
          <div class="element-item-label"> {{ ele.name }}</div>
        </div> -->
      </div>
      <div
        v-if="containElementModel.elementRange.length <= 0"
        class="no-data"
      >
        <ImgNoData />
        <div class="g-m-t-16">{{ $t("暂无数据") }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { CircleCloseFilled } from "@element-plus/icons";
import { ContainElementModel } from "./ContainElementModel";
import { TreeSelectModel } from "../common/TreeSelectModel";
import ImgNoData from "@/common/icons/ImgNoData.vue";

const props = defineProps<{
  containElementModel: ContainElementModel;
  treeSelectModel: TreeSelectModel;
}>();

const currentIndex = ref(-1);
let dargIndex = ref(-1);
// const showTips = ref(true);
let oldData = null;
let newData = null;

const dragstart = (value, index) => {
  oldData = value;
  dargIndex.value = index;
  currentIndex.value = -1;
  // showTips.value = false;
};
const dragenter = (value, e) => {
  newData = value;
  e.preventDefault();
};

const dragover = e => {
  e.preventDefault();
};

const dragend = () => {
  if (oldData !== newData) {
    let oldIndex = props.containElementModel.elementRange.indexOf(oldData);
    let newIndex = props.containElementModel.elementRange.indexOf(newData);

    let newItems = [...props.containElementModel.elementRange];
    newItems.splice(oldIndex, 1);
    newItems.splice(newIndex, 0, oldData);
    props.containElementModel.elementRange = [...newItems];
  }
  dargIndex.value = -1;
  // showTips.value = true;
};

const handleClickItem = index => {
  if (props.containElementModel.isModelDisabled) return;
  if (currentIndex.value === index) {
    currentIndex.value = -1;
  } else {
    currentIndex.value = index;
  }
};

// 删除某个组件
const removeComp = (index, element) => {
  props.containElementModel.elementRange.splice(index, 1);
  // const rightIdsIndex = props.containElementModel.containElementConfig.rightSelectedIds.findIndex(item => item === element.id);
  // props.containElementModel.containElementConfig.rightSelectedIds.splice(rightIdsIndex, 1);
  props.treeSelectModel.updateNodeDiabled([element.id]);
  currentIndex.value = -1;
};

const clearAllElement = () => {
  if (props.containElementModel.isModelDisabled) return;
  const elementList = props.containElementModel.elementRange;
  let updateList: string[] = [];
  elementList.forEach(ele => {
    updateList.push(ele.id);
  });
  // const list = props.containElementModel.containElementConfig.rightSelectedIds.filter(item => !updateList.includes(item));
  props.containElementModel.elementRange = [];
  // props.containElementModel.containElementConfig.rightSelectedIds = [...list];
  props.treeSelectModel.updateNodeDiabled(updateList);
  currentIndex.value = -1;
};

const handleMousedown = e => {
  if (!e.target.className.includes("element-item")) {
    currentIndex.value = -1;
  }
};

onMounted(() => {
  window.addEventListener("click", handleMousedown);
});
onUnmounted(() => {
  window.removeEventListener("click", handleMousedown);
});
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-contain-element-right-area {
  width: 310px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;

  .clear-wrap {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: $frame-siderbar-bg-color;
    border-bottom: 1px solid #e4e4e4;
  }

  .element-list {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    //flex-wrap: wrap;
    overflow: auto;
    padding-top: 8px;
    padding-bottom: 16px;

    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50% auto;
    }

    .element-item {
      position: relative;
      height: 24px;
      line-height: 24px;
      margin: 0 12px;
      padding: 0 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      .delete-icon {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 14px;
        height: 14px;
      }
      // .element-item-box {
      //   width: 100%;
      //   height: 100%;
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: center;
      //   align-items: center;
      // }
      .element-item-label {
        font-size: 11px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .element-item-img {
        width: 16px;
        height: 16px;
      }
    }
    .active {
      border: 1px solid $theme-color;
    }
    // &::-webkit-scrollbar {
    //   display: none; /* Chrome Safari */
    // }
  }
}
</style>
